<template>
  <main class="main">
    <headerHome></headerHome>
    <h1 class="title">专业设计师在<span>华夏</span>发现、收集灵感</h1>
    <searchInput style="margin: 0 auto; box-shadow: 0 0.5rem 3rem 0.5rem rgba(0,0,0,.08);"></searchInput>
    <div class="photo_Wall">
      <div class="img_box">
        <div class="img_item" v-for="(item,index) in imgList" >
          <a class="img_item_top">
          
            <img :src="item.img1"/>
          </a>
          <a class="img_item_bottom"><img :src="item.img2" /></a>
        </div>

      </div>
    </div>
  </main>
</template>

<script setup>
import headerHome from '@/components/header/headerHome.vue'
import searchInput from '@/components/searchInput/index.vue'
import { onMounted, reactive } from 'vue';
import { topViewList } from './api/api';
onMounted(()=>{
  console.log(reqTopViewList())
})
const imgList = reactive([
  {img1:new URL(`@/assets/图1-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图2-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图1-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图2-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图1-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图2-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图1-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
  {img1:new URL(`@/assets/图2-1.webp`, import.meta.url).href,img2:new URL(`@/assets/图1-2.webp`, import.meta.url).href},
])

const reqTopViewList = async ()=> {
  const res = await topViewList;
  console.log(res)
}
</script>

<style lang="scss" scoped>
.main {
  min-height: 100vh;
  min-width: 800px;
  background: rgb(247, 249, 250);
  position: relative;

  // background-image: ;
  .title {
    position: relative;
    padding-top: calc(14vh - 80px);
    font-size: 3.6rem;
    text-align: center;
    z-index: 1;
    white-space: nowrap;
    // animation: neuIV0M_ .5s backwards;
    margin-bottom: 3rem;

    span {
      color: #ff5967;
      padding-right: 8px;
    }
  }

  .photo_Wall {
    margin-top: 24px;
    .img_box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 48px;

      .img_item {
        padding: 0 12px;
        width: 25%;
        max-width: 224px;

        a {
          position: relative;
          display: block;
          max-height: 266px;
          width: 100%;
          max-width: 200px;
          margin-bottom: 24px;

          img {
            width: 100%;
          }
        }
      }
    }
  }
}</style>